<template>
    <div class="page-detail">
        <base-breadcrumb>
            <a-card v-loading="loading">
                <title-name title="大事记基本信息"></title-name>
                <a-descriptions>
                    <a-descriptions-item label="单位">{{ formData.depName }}</a-descriptions-item>
                    <a-descriptions-item label="主题">{{ formData.theme }}</a-descriptions-item>
                    <a-descriptions-item label="活动日期">{{ formData.activityDate|dateFormat('D') }}</a-descriptions-item>
                </a-descriptions>
                <a-descriptions>
                    <a-descriptions-item label="地点">{{ formData.address }}</a-descriptions-item>
                    <a-descriptions-item label="记录人">{{ formData.recorder }}</a-descriptions-item>
                    <a-descriptions-item label="摄影人">{{ formData.photographer }}</a-descriptions-item>
                </a-descriptions>
                <a-descriptions>
                    <a-descriptions-item label="概要">{{ formData.outline }}</a-descriptions-item>
                </a-descriptions>

                <template>
                    <title-name title="重要领导照片"></title-name>
                    <a-table
                        bordered
                        row-key="rowKey"
                        :columns="columns"
                        :data-source="formData.importantPhotoVos">
                        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
                        <template slot="fileInfoVO" slot-scope="text, record, index">
                            <img style="max-width: 100px;" :src="$fileUrl(text)"  @click="preview(text)" alt="">
                        </template>
                        <template slot="operation" slot-scope="text, record, index">
                            <div class="pub-table-list-action">
                                <span><a :href="$fileUrl(record.fileInfoVO)" >导出</a></span>
                            </div>
                        </template>
                    </a-table>
                </template>

                <template>
                    <title-name class="mt20" title="其他附件"></title-name>
                    <a-col span="24">
                        <a-form-model-item label="其他照片">
                            <b-upload businessCode="TM04" uploadType="image-list" disabled
                                      :file-list.sync="formData.attachmentVos1"></b-upload>
                        </a-form-model-item>
                    </a-col>
                    <a-col span="24">
                        <a-form-model-item label="其他附件">
                            <b-upload businessCode="TM04" upload-type="single" disabled
                                      :file-list.sync="formData.attachmentVos2"></b-upload>
                        </a-form-model-item>
                    </a-col>
                </template>
            </a-card>

            <div class="pub-header-btn page-btn-right-top">
                <a-button @click="$close()" v-checkVisibleInDetail>关闭</a-button>
            </div>
        </base-breadcrumb>

        <!-- 图片预览 -->
        <pre-view :previewImage="previewImage" :visible.sync="previewVisible"></pre-view>

    </div>
</template>

<script>

import memorabilia from '@/api/office/memorabilia'
import PreView from '@/components/PreView'

export default {
    components:{PreView},
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'index',
                    scopedSlots: { customRender: 'index' },
                    width: 70
                },
                {
                    title: '照片',
                    dataIndex: 'fileInfoVO',
                    scopedSlots: { customRender: 'fileInfoVO' },
                    width: 200
                },
                {
                    title: '重要领导照片描述',
                    dataIndex: 'description'
                },
                {
                    title: '操作',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' },
                    width: 200
                }
            ],
            loading: false,
            formData: {
                depId: Date.now(),
                importantPhotoVos: [],
                attachmentVos: [],
                attachmentVos1: [],
                attachmentVos2: {}
            },
            previewImage: '',
            previewVisible: false,
        }
    },
    mounted: async function() {
        if (this.$route.query.id) {
            this.formData.id = this.$route.query.id
            await this.getDetails()
        }
    },
    methods: {
        preview(file) {
            this.previewImage = file.url || this.$fileUrl(file)
            this.previewVisible = true
        },
        // 获取编辑回显数据
        async getDetails() {
            this.loading = true
            let res = await memorabilia.findDetailById({}, { id: this.formData.id })
            this.loading = false
            if (res.code === 200) {
                this.formData = this.$assign(this.formData, res.data)
                this.formData.attachmentVos1 = []
                this.formData.attachmentVos2 = []
                res.data.attachmentVos.map(v => {
                    if (v.type === 1) {
                        this.formData.attachmentVos1.push(v.fileInfoVO)
                    } else {
                        this.formData.attachmentVos2 = v.fileInfoVO
                    }
                })
                this.$console(this.formData)
            }
        }
    }
}
</script>
<style scoped>
.tender-container .ant-radio-group {
    float: right;
}
</style>
